<template>
    <div class="settings">
      <h1>系统设置</h1>
      <el-form :model="form" label-width="120px">
        <el-form-item label="站点名称">
          <el-input v-model="form.siteName" />
        </el-form-item>
        <el-form-item label="站点描述">
          <el-input v-model="form.siteDescription" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, reactive } from 'vue';
  
  export default defineComponent({
    name: 'Settings',
    setup() {
      const form = reactive({
        siteName: '我的博客',
        siteDescription: '这是一个技术博客',
      });
  
      const handleSave = () => {
        console.log('保存设置', form);
      };
  
      return {
        form,
        handleSave,
      };
    },
  });
  </script>
  
  <style scoped>
  .settings {
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  </style>